<template>
    <div>
        <top-bar>
            <span slot="title">王者荣耀<span class="ml-3">攻略站</span></span>
            <span slot="more" class="fs-sm">更多英雄
                <svg class="icon fs-lg" aria-hidden="true">
                    <use xlink:href="#icon-goto"></use>
                </svg>
            </span>
        </top-bar>
        <div class="infoBox" :style="`background-image:url(${model.banner})`">
            <div class="info text-white d-flex flex-column jc-end p-3">
                <div class="pt-2">{{model.alias}}</div>
                <h2 class="pt-2 m-0">{{model.name}}</h2>
                <div class="pt-2">{{model.categories.map(e => e.name).join('/')}}</div>
                <div class="d-flex pt-1" v-if="model.scores">
                    <span >难度<span class="deg bg-brown">{{model.scores.diffcult}}</span></span>
                    <span>技能<span class="deg bg-blue">{{model.scores.skill}}</span></span>
                    <span>攻击<span class="deg bg-red">{{model.scores.battle}}</span></span>
                    <span>生存<span class="deg bg-grey-2">{{model.scores.survival}}</span></span>
                    <router-link tag="span" to="/" class="flex-1 text-right fs-xs text-grey" >皮肤：6
                        <svg class="icon " aria-hidden="true">
                            <use xlink:href="#icon-goto"></use>
                        </svg>
                    </router-link>
                </div>
            </div>
        </div>
        <hero-list-card v-if="model">
            <div slot="page1" >
                <hero-recommend  :model="model"></hero-recommend>
            </div>
            <div slot="page2">
                <div class="text-center text-grey p-3">暂无数据</div>
            </div>
        </hero-list-card>
    </div>
</template>

<script>
    import TopBar from 'components/content/TopBar/TopBar.vue'

    import HeroListCard from './childCmps/HeroListCard.vue/HeroListCard.vue'
    import HeroRecommend from './childCmps/HeroRecommend/HeroRecommend.vue'


    export default {
        props:{
            id:{
                required:true,
                type:String
            }
        },
        data () {
            return {
                model:{
                    banner:"",
                    alias: "",
                    categories:[],
                    name:"",
                    scores:{}
                }
            }
        },
        components:{
            TopBar,
            HeroListCard,
            HeroRecommend
        },
        methods:{
            async fetch(){
                const res =await this.$http.get(`hero/${this.id}`)
                this.model = res.data
            }
        },
        created(){
            this.fetch()
        }
    }
</script>

<style lang="scss" scoped>
    .infoBox{
        height: 50vw;
        background: #fff no-repeat center;
        background-size: auto 100%;
        .info{
            background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
            width: 100%;
            height: 100%;
        }
        .deg{
            text-align: center;
            font-size: .6rem;
            color: rgba(255,255,255,0.6);
            display: inline-block;
            margin: 0 0.4615rem;
            width: 1rem;
            height: 1rem;
            line-height: 1rem;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255,0.26);
            
        }
    }
</style>